/**
 * @author 杨执信
 * @page 详情页
*/
import Head from 'next/head'
import { Header, Footer, Author, Advert } from '../components/index'
import { Row, Col, Breadcrumb, Affix } from 'antd'
import { CalendarOutlined, FolderOutlined, FireOutlined } from '@ant-design/icons'
import { get, servicePath } from '../utils'
import marked from 'marked'
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'
import Tocify from '../components/tocify/tocify.tsx'
import { rTime } from './functions'
// import styles from '../styles/pages/detail.module.css'

export default function Detail(props) {
  // console.log(props);
  const renderer = new marked.Renderer()

  // 文章导航栏配置
  const tocify = new Tocify()
  renderer.heading = function (text, level, raw) {
    const anchor = tocify.add(text, level)
    return `<a id="${anchor}" 
    href="#${anchor}" 
    class="anchor-fix">
    <h${level}>${text}</h${level}>
    </a>\n`
  }

  marked.setOptions({
    renderer: renderer, // 渲染方式
    gfm: true,  // 启动gitub样式markdown
    pedantic: false, // 允许容错，不符合语法的会纠正
    sanitize: false, // 原始输出不忽略html标签
    tables: true, // 根据gitub样式输出表格,gfm需要为true
    breaks: false, // 不支持gitub的换行符
    smartList: true, // 允许自动渲染列表
    highlight: function (code) {
      // 检测传入的代码并返回
      return hljs.highlightAuto(code).value
    }
  })

  let html = marked(props.article_content)

  return (
    <>
      <div>
        <Head>
          <title>Detail</title>
        </Head>
      </div>
      <Header></Header>
      <Row className="comm_main" type="flex" justify="center">
        <Col className="comm_left" xs={24} sm={24} md={16} lg={18} xl={14}>
          <div>
            <div className="bread_div">
              {/* 面包屑导航 */}
              <Breadcrumb>
                <Breadcrumb.Item>
                  <a href="/">首页</a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>
                  {props.typeName}
                </Breadcrumb.Item>
                <Breadcrumb.Item> {props.title}</Breadcrumb.Item>
              </Breadcrumb>
            </div>
            <div>
              <div className="detailed_title">
                {props.title}
              </div>
              <div className="list_icon center">
                <span>
                  <CalendarOutlined />
                  {rTime(props.addTime)}
                </span>
                <span>
                  <FolderOutlined />
                  {props.typeName}
                </span>
                <span>
                  <FireOutlined />
                  {props.view_count}
                </span>
              </div>
              <div className="detailed_content"
                dangerouslySetInnerHTML={{ __html: html }}
              >
              </div>
            </div>
          </div>
        </Col>
        <Col className="comm_right" xs={0} sm={0} md={7} lg={5} xl={4}>
          <Author></Author>
          {/* <Advert></Advert> */}
          <Affix offsetTop={5}>
            <div className="detail_nav comm_box">
              <div className="nav_title">文章目录</div>
              {tocify && tocify.render()}
            </div>
          </Affix>
        </Col>
      </Row>
      <Footer></Footer>
    </>
  )
}

// 根据id请求详情页数据
Detail.getInitialProps = async (context) => {
  // console.log(context.query.id);
  let id = context.query.id
  const result = new Promise((resolve, reject) => {
    get(`${servicePath.getDetailArticleById}${id}`)
      .then((res) => {
        // console.log(res);
        resolve(res.data.data[0])
      })
      .catch((err) => {
        reject(err)
      })
  })
  return await result
}
